<template>
  <div class="film-list-wrap">
    <ul class="film-list-content">
      <li v-for="data in dataList" :key="data.id" @click="handleClick(data.filmId)" class="flex items-center">
        <lazy-img class="fl" :width="'0.66rem'" :height="'1rem'" :img-src="data.poster"></lazy-img>
        <div class="info flex flex-col justify-center fl">
          <div class="info-name">
            <span class="name">{{data.name}}</span>
            <span class="item" v-if="data.item">{{data.item.name}}</span>
          </div>
          <div class="info-actors ellipsis" v-if="data.actors">
            <span class="label">主演：{{ data.actors | actorFilter }}
            </span>
          </div>
          <div class="info-detail">
            <span class="label">上映日期：周五 2月12日</span>
          </div>
        </div>
        <div class="buy fr">预购</div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import LazyImg from '@/components/LazyImg'
import { mapState } from 'vuex'

export default {
  name: 'ComingSoon',
  components: { LazyImg },
  data () {
    return {
      dataList: [
        {
          filmId: 1,
          name: '夺冠',
          poster: 'https://pic.maizuo.com/usr/movie/0f35af2416df5a58222f902362bc927e.jpg'
        },
        {
          filmId: 2,
          name: '姜子牙',
          poster: 'https://pic.maizuo.com/usr/movie/0f35af2416df5a58222f902362bc927e.jpg'
        },
        {
          filmId: 3,
          name: '夺冠',
          poster: 'https://pic.maizuo.com/usr/movie/0f35af2416df5a58222f902362bc927e.jpg'
        },
        {
          filmId: 4,
          name: '姜子牙',
          poster: 'https://pic.maizuo.com/usr/movie/0f35af2416df5a58222f902362bc927e.jpg'
        }
      ]
    }
  },
  filters: {
    actorFilter (actors) {
      if (actors === undefined) return '暂无主演'
      return actors.map(item => item.name).join(' ')
    }
  },
  computed: {
    ...mapState('CityModule', ['cityId'])
  },
  created () {
  },
  methods: {
    handleClick (id) {
      if (!id) return
      // 1. 路径
      // this.$router.push(`/detail/${id}`) // 编程式导航
      // 2. 路由名字
      this.$router.push({
        name: 'Detail',
        params: {
          id
        }
      })
      // 3. query方式跳转详情
      // this.$router.push(`/detail?id=${id}`)
    },
    getData () {
      axios({
        url: `https://m.maizuo.com/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=2&k=6216172`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1612336240114529597915137","bc":"110100"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then((response) => {
        const res = response.data
        if (!res.status) {
          const data = res.data
          this.dataList = data.films
        }
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
.film-list-wrap {
  padding-bottom: .12rem;
}
.film-list-content {
  padding-left: .14rem;
  background-color: #fff;
  > li {
    padding: .14rem .14rem .14rem 0;
    height: 1.24rem;
    @include border-b-1px(#ededed);
  }
}
// .img-box-wrap {
//   margin-right: .08rem;
//   overflow: hidden;
//   .img-box-01, .img-box-02 {
//     width: .66rem;
//     height: 1rem;
//     img{
//       width: 100%;
//       height: 100%;
//       object-fit: cover;
//     }
//   }
//   .img-box-02 {
//     position: absolute;
//     top: 0;
//   }
// }
.info {
  margin-left: .08rem;
  padding-right: .14rem;
  width: calc(100% - 1.3rem);
}
.info-name {
  span {
    display: inline-block;
    vertical-align: middle;
  }
  .name {
    margin-right: .05rem;
    height: .22rem;
    line-height: .22rem;
    font-size: .16rem;
    color: #191a1b;
    overflow: hidden;
  }
  .item {
    height: .14rem;
    line-height: .14rem;
    padding: 0 2px;
    color: #fff;
    font-size: .1rem;
    background-color: #d2d6dc;
    border-radius: 2px;
  }
}
.grade {
  font-size: .14rem;
  color: #ffb232;
}
.info-grade, .info-actors, .info-detail{
  font-size: .13rem;
  margin-top: .04rem;
  color: #797d82;
}
.buy {
  width: .5rem;
  height: .24rem;
  line-height: .24rem;
  font-size: .13rem;
  color: #ffb232;
  text-align: center;
  // border-radius: .02rem;
  @include border-1px(#ffb232, .02rem);
  &:active {
    color: #fff;
    background: #ffb232;
  }
}
</style>
